<template>
  <me-table :data="state.list" :pagination="pagination" @currentChange="pageSizeChange" :head-handle="{
    add: {
      label: '添加轮播图',
      callback: open
    }
  }" :handle="{
  edit: edit,
  delete: del
}">
    <el-table-column prop="imageUrl" label="图片" width="300">
      <template #default="{ row }">
        <div>
          <el-image :src="row.imageUrl"></el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="slogan" label="标语" />
    <el-table-column prop="url" label="跳转链接">
      <template #default="{ row }">
        <a :href="row.url" target="_blank">{{ row.url }}</a>
      </template>
    </el-table-column>
    <el-table-column prop="url" label="是否展示">
      <template #default="{ row }">
        <el-switch v-model="row.show" :before-change="() => stateBeforeChange(row._id, row.show)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="展示顺序" />
  </me-table>
  <me-dialog v-model="dialogVisible" @confirm="submit(ruleFormRef)">
    <el-form ref="ruleFormRef" :model="state.formData" :rules="rules">
      <el-form-item label="图片" prop="imageUrl">
        <Upload v-model="state.formData.imageUrl"></Upload>
      </el-form-item>
      <el-form-item label="标语" prop="slogan">
        <el-input v-model="state.formData.slogan" />
      </el-form-item>
      <el-form-item label="链接" prop="url">
        <el-input v-model="state.formData.url" />
      </el-form-item>
      <el-form-item label="是否展示" prop="show">
        <el-switch v-model="state.formData.show" />
      </el-form-item>
      <el-form-item label="展示顺序" prop="sort">
        <el-input v-model="state.formData.sort" />
      </el-form-item>
    </el-form>
  </me-dialog>
</template>
  
<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import { getBannerList, addBanner, editBanner, delBanner } from '@/axios/api/banner'
import Upload from '@/components/Upload/Upload.vue'
import type { FormInstance, FormRules } from 'element-plus'

type Form = { imageUrl: string, slogan: string, url: string, show: boolean, sort?: number, _id?: string }
const initFormData = <T>(data?: T): T => {
  if (data) return { ...data }
  return <T>{}
}
const state = reactive({
  list: <object[]>[],
  formData: initFormData<Form>()
})
const pagination = reactive({
  total: 0,
  index: 1,
  size: 6
})
const getList = async () => {
  const res: any = await getBannerList(pagination.index, pagination.size)
  state.list = res.records
  pagination.total = res.total
}
onMounted(() => {
  getList()
})

const dialogVisible = ref<boolean>(false)
const open = () => {
  dialogVisible.value = true
  resetForm()
}

const ruleFormRef = ref<FormInstance>()


// const formData = reactive(initFormData())
const resetForm = () => {
  // Object.assign(formData, initFormData())
  // ruleFormRef?.value?.resetFields()
  state.formData = <Form>initFormData()
}

const validateSort = (rule: any, value: any, callback: any) => {
  if (state.formData.show && !value) {
    // 开启展示，不设置顺序值提示错误
    callback(new Error('开启展示必须设置展示顺序！'))
  } else {
    callback()
  }
}
const rules = reactive<FormRules>({
  imageUrl: [{ required: true, message: '请上传图片！', trigger: 'blur' }],
  sort: [
    { validator: validateSort , trigger: 'blur' }
  ]
})

// 记录修改信息的id
// let editId: string;
const submit = async (formEl: FormInstance | undefined) => {
  const { _id: id, imageUrl, slogan, url, show, sort } = state.formData
  if (id) {
    await editBanner({ id, imageUrl, slogan, url, show, sort })
    dialogVisible.value = false
    getList()
  } else {
    formEl?.validate(async valid => {
      if (valid) {
        const res: any = await addBanner(state.formData)
        dialogVisible.value = false
        // getList()
        state.list.unshift(res)
      }
    })
  }
}


const edit = (row: any) => {
  console.log(row)
  open()
  state.formData = row
  // const { _id, imageUrl, slogan, url } = row
  // formData.imageUrl = imageUrl
  // formData.slogan = slogan
  // formData.url = url
  // editId = _id
}
const del = (id: string) => {
  delBanner(id)
  getList()
}

const pageSizeChange = (index: number) => {
  pagination.index = index
  getList()
}

const stateBeforeChange = async (id: string, current: boolean) => {
  await editBanner({id: id, show: !current})
  return true
}
</script>
  
<style>
</style>